<template>
  <Viewer :router="viewerRouter"></Viewer>
</template>

<script setup>
import { defineAsyncComponent, watch } from 'vue'
import { useInfiniteForyou } from '@/compositions/request/infiniteForyou'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'

const Viewer = defineAsyncComponent(() => import('@/components/viewer/Viewer.vue'))

const props = defineProps({
  id: { type: String },
  shareAff: { type: String },
})

const emits = defineEmits(['sharedFeed', 'change:fpar'])

const viewerRouter = useMobileViewerRouter('mobile-share-media')
const { fpar, setFromMainViewer } = viewerRouter

setFromMainViewer({
  foryou: useInfiniteForyou({
    params: { mv_id: props.id, share_aff: props.shareAff },
    onInit: (dataList) => {
      emits('sharedFeed', dataList[0])
    },
  }),
})

watch(
  fpar,
  (v) => {
    emits('change:fpar', v)
  },
  { immediate: true },
)
</script>
